<template>
    <div class="full column start uiwidget-setting" style="overflow-y: auto; overflow-x: hidden">

        <SettingWidget v-show="!!widget" ref="refWidgetCommonSetting"></SettingWidget>

    </div>
</template>

<style>
.uiwidget-setting .form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}
.uiwidget-setting .form-row .header {
    width: 50px ;
}
.uiwidget-setting .form-row .header4 {
    width: 80px ;
}
.uiwidget-setting .form-row .label {
    width:20px
}
.uiwidget-setting .form-row .label2 {
    margin-left: 10px;
    width:20px
}
</style>

<script lang="ts" setup>
import {Obj as Widget}  from "../../../lvgl"
import SettingWidget from './SettingWidget.vue'
import { ref, Ref } from 'vue'
import { LvglEditor } from "./LvglEditor";

const refWidgetCommonSetting = ref(null) as unknown as Ref<typeof SettingWidget>

let widget = ref(null) as Ref<Widget|null>


function setWidget(_widget: Widget, editor: LvglEditor){
    widget.value = _widget

    // refWidgetCommonSetting.value.setWidget(widget)

    setTimeout(()=>{
        if(refWidgetCommonSetting.value) {
            refWidgetCommonSetting.value.setWidget(_widget, editor)
        }
    }, 0)
}

defineExpose({setWidget})
    
</script>